<template>
  <div>
    <h1>照片清单</h1>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input prefix-icon="el-icon-search" @keyup.enter.native="search(formInline)" v-model="formInline.phoneNum"
          placeholder="手机号搜索"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formInline.pay" @change="search(formInline)" placeholder="全部状态">
          <el-option label="已付款" value="1"></el-option>
          <el-option label="未付款" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formInline.over" @change="search(formInline)" placeholder="全部状态">
          <el-option label="完成" value="1"></el-option>
          <el-option label="未完成" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search(formInline)">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="用户ID" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.userid }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="120" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="价格" width="100" align="center">
        <template slot-scope="scope">
          <span style="color: orangered;">￥{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图片" align="center">
        <template slot-scope="scope">
          <div class="img_box">
            <!--  <img :src="JSON.parse(tableData[scope.$index].picture)" class="img" alt=""> -->
            <div class="button">
              <el-button size="mini" type="primary" @click="lookImgList(scope.row.userid,scope.row.type)">点击查看图片</el-button>
              <!-- <el-button size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport(scope.row)"> -->
              <!-- 导出 </el-button> -->
            </div>
          </div>

        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" v-if="scope.row.ifpay ==1" @click="change(scope.row.userid,1,123)" type="success">已付款</el-button>
          <el-button size="mini" v-else type="danger" @click="change(scope.row.userid,1,456)">未付款</el-button>

          <el-button size="mini" v-if="scope.row.finallys==1" @click="change(scope.row.userid,1,321)" type="success">已完成</el-button>
          <el-button size="mini" v-else type="warning" @click="change(scope.row.userid,1,654)">未完成</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="text-align: center;" background @current-change="handleCurrentChange" :current-page.sync="currentpage"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        formInline: {
          phoneNum: '',
          pay: '',
          over: ''
        },
        img: [
          "http://pxe3louwe.bkt.clouddn.com//xym/essence/product/1568860510185",
          "http://pxe3louwe.bkt.clouddn.com//xym/essence/product/1568860510185",
          "http://pxe3louwe.bkt.clouddn.com//xym/essence/product/1568860510185",
          "http://pxe3louwe.bkt.clouddn.com//xym/essence/product/1568860510185",
          "http://pxe3louwe.bkt.clouddn.com//xym/essence/product/1568860510185",
          "http://pxe3louwe.bkt.clouddn.com//xym/essence/product/1568860510185",
          "http://pxe3louwe.bkt.clouddn.com//xym/essence/product/1568860510185",
          "http://pxe3louwe.bkt.clouddn.com//xym/essence/product/1568860510185"
        ],
        tableData: [],
        total: 1,
        pagesize: 10,
        currentpage: null,
        downImg: []
      }


    },
    created() {
      this.api.get('/api/searchchose').then(res => {
        console.log(res.data)
        this.tableData = res.data.array;
        this.total = res.data.total;

        // if(this.tableData.length+1){
        // 	 this.$notify({
        //         title: '提示',
        //         message: '又有一个新的订单提交！',
        //         duration: 0
        //       });
        // }
        //  let imglist= this.tableData.filter(item => {
        //   return item.phone == 17707355692;
        // }).map(item => {
        //    return item.picture
        // })
        // this.downImg=JSON.parse(imglist[0])
        // console.log(this.downImg)
      })
    },
    methods: {
      lookImgList(id, type) {
        this.$router.push({
          path:'./imgList',
          query:{
            id:id,
            type:type
          }
        })
      },


      imgNum(phone) {
        this.downImg = this.tableData.filter(item => {
          return item.phone == phone;
        }).map(item => {
          return item.picture
        })
        console.log(this.downImg[0])
      },


      //method方法：
      handleExport(row) {
        var elemIF = document.createElement('iframe')
        elemIF.src = 'user/downloadExcel?snapshotTime=' + formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm') +
          '&category=' + row.category
        elemIF.style.display = 'none'
        document.body.appendChild(elemIF)
      },

      downloadIamge(name, phone) { //下载图片地址和图片名
        console.log(name, phone)
        let imglist = this.tableData.filter(item => {
          return item.phone == phone;
        }).map(item => {
          return item.picture
        })
        this.downImg = JSON.parse(imglist[0])
        let imgsrc = this.downImg;

        for (let i = 0; i < this.downImg.length; i++) {
          var image = new Image();
          // 解决跨域 Canvas 污染问题
          image.setAttribute("crossOrigin", "anonymous");
          image.onload = function() {
            var canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            var context = canvas.getContext("2d");
            context.drawImage(image, 0, 0, image.width, image.height);
            var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

            var a = document.createElement("a"); // 生成一个a元素
            var event = new MouseEvent("click"); // 创建一个单击事件
            a.download = name || "photo"; // 设置图片名称
            a.href = url; // 将生成的URL设置为a.href属性
            a.dispatchEvent(event); // 触发a的单击事件
          };
          image.src = imgsrc[i];
        }

      },
      downs() {
        this.downloadIamge(this.pic.url, 'pic')
      },
      search(val) {
        let param = {
          phone: val.phone,
          ifpay: val.pay,
          finallys: val.over
        }
        console.log(param)
        this.api.get('/api/searchchose', param).then(res => {
          this.currentpage = 1;
          this.total = res.data.total;
          this.tableData = res.data.array
        })
      },
      change(id, status, val) {
        this.$confirm('确定更新商品状态吗? 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let param = {
            userid: id
          }
          if (val == '123') {
            this.$set(param, 'ifpay', 2)
          } else if (val == '456') {
            this.$set(param, 'ifpay', 1)
          } else if (val == '321') {
            this.$set(param, 'finallys', 2)
          } else {
            this.$set(param, 'finallys', 1)
          }
          console.log(param)
          this.api.get('/api/choose', param).then(res => {
            // this.tableData=res.data;
            console.log(res.data)
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '更新成功!'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });

      },
      handleCurrentChange(currentpage) {
        let keyword = this.formInline.phone;
        let status = this.formInline.pay;
        let finallys = this.formInline.over;
        if (keyword != "" || status != "") {
          this.api.get('/api/searchchose?phone=' + keyword + '&ifpay=' + status + '&finallys' + finallys + '&page=' +
            currentpage).then(res => {
            this.total = res.data.total;
            this.tableData = res.data.array
          })
        } else {
          this.api.get('/api/searchstudio', {
            page: currentpage
          }).then(res => {
            this.total = res.data.total;
            this.tableData = res.data.array;
          })
        }
      }
    }
  }
</script>

<style scoped>
  .img_box {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    width: 50px;
    height: 50px;
  }

  .button {
    padding: 10px 10px;
  }

  .img_box img {
    width: 100%;
    height: 100%;
  }
</style>
